<template>
  <div class="container">
    <div class="title">
      <span>修改</span>
      <span class="back" @click="back">
        <i class="iconfont icon-fanhui"></i> 返回
      </span>
    </div>
    <el-divider></el-divider>
    <el-form label-width="80px">
      <div class="wrap">
        <el-form-item label="店面" prop="store_id" v-if="type != '4'">
          <el-select v-model="store_id" clearable filterable placeholder="请选择店面"  @change="onSelectChange" >
            <el-option
                v-for="item in storeData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店面" prop="store_ids" v-if="type === '4'">
          <el-select v-model="store_ids" multiple placeholder="请选择店面" style="width:50%;">
            <el-option
                v-for="item in storeData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组" prop="group_id" v-if="type != '4'">
          <el-select v-model="group_id" clearable filterable placeholder="请选择组">
            <el-option
                v-for="item in groupData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工类型" prop="type">
          <el-select v-model="type" clearable filterable placeholder="请选择员工类型" @change="changeType">
            <el-option
                v-for="item in typeData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-input
              size="medium"
              v-model="name"
              placeholder="请填写员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="绑定用户" prop="user_id">
          <el-select v-model="user_id" clearable filterable placeholder="请选择用户">
            <el-option
                v-for="item in userData"
                :key="item.id"
                :label="item.nickname"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
              size="medium"
              type="number"
              v-model="phone"
              placeholder="请填写联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
              size="medium"
              v-model="remarks"
              placeholder="请填写备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="desc">
          <el-input
              size="medium"
              v-model="desc"
              placeholder="请填写简介"
          ></el-input>
        </el-form-item>
        <el-form-item class="submit">
          <el-button type="primary" @click="updateValue()">保 存</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import Store from '@/models/store'
import User from '@/models/user'
import StoreGroup from '@/models/store-group'
import StoreUser from '@/models/store-user'

export default {
  props: {
    StoreUserId: {
      type: Number,
    },
  },
  data() {
    return {
      storeData: [],
      groupData: [],
      userData: [],
      store_ids: [],
      typeData: [{
        id: '1',
        name: '店长',
      }, {
        id: '2',
        name: '组长',
      }, {
        id: '3',
        name: '员工',
      }, {
        id: '4',
        name: '老板',
      }],
      name: '',
      remarks: '',
      desc: '',
      phone: '',
      group_id: '',
      store_id: '',
      type: '',
      user_id: '',
    }
  },
  mounted() {
    this.getStoreAll()
    this.getUserAll()
    this.getInfo()
  },
  methods: {
    changeType() {
      this.$forceUpdate()
      if (this.type === '4') {
        this.store_id = ''
        this.store_ids = []
      }
    },
    onSelectChange() {
      this.group_id = ''
      this.getStoreGroupAll()
    },
    async getStoreGroupAll() {
      this.groupData = await StoreGroup.getStoreGroupAll({ store_id: this.store_id })
    },
    async getUserAll() {
      this.userData = await User.getUserAll()
    },
    async getStoreAll() {
      this.storeData = await Store.getStoreAll()
    },
    async getInfo() {
      const info = await StoreUser.getStoreUserInfo(this.StoreUserId)
      this.name = info.name
      this.phone = info.phone
      this.remarks = info.remarks
      this.desc = info.desc
      this.store_id = info.store_id
      this.store_ids = info.store_ids
      this.group_id = info.group_id
      this.type = info.type
      this.user_id = info.user_id
      if (this.type !== '4') {
        this.getStoreGroupAll()
      }
    },
    back() {
      this.$emit('editClose')
    },
    async updateValue() {
      if (this.group_id == null) {
        this.group_id = ''
      }
      if (this.store_id == null) {
        this.store_id = ''
      }
      const info = {
        id: this.StoreUserId,
        name: this.name,
        phone: this.phone,
        remarks: this.remarks,
        desc: this.desc,
        store_ids: this.store_ids,
        store_id: this.store_id,
        group_id: this.group_id,
        type: this.type,
        user_id: this.user_id,
      }
      const res = await StoreUser.updateStoreUser(info)
      if (res.error_code === 0) {
        this.$message.success(`${res.msg}`)
        this.back()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 0;
}

.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;

    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .wrap {
    padding: 20px;
  }

  .submit {
    float: left;
  }
}
</style>
